<template>
  <div>
      <div class="box">
          <div class="channelTab" :style="divTab1">
            <span class="textC fl fontSize30" v-for="(item,index) in tabTit" :key="index" @click="tab(index)" :class="{'active': index == tabIndex}">{{item.title}}</span>
          </div>
      </div>
      <div class="divbox" :style="divTab">
        <h2 :style="h2Style">{{detail.title}}</h2>
        <div class="divCon">
            <div class="divtt fl">
                <span>信息发布:{{detail.partnerName}}</span>
                <span>招标控制价：{{detail.ctrlPrice ? detail.ctrlPrice : '1000000' | money}}万</span>
                <span>发布日期:{{detail.createTime | timeData}} 截止日期:{{detail.endDate | timeData}}</span>
            </div>
            <!-- :class="[focusStatus == 0 ? 'colorFFF' : 'textC backgroundedeeee color5b5e5e']" -->
            <p class="fr subscribe colorFFF" v-if="tabIndex == 0">
                <span class="dot fl"></span>
                关注
            </p>
        </div>
         <recommended :detail="detail" :tabIndex="tabIndex"></recommended>
    </div>
  </div>
</template>
<script>
import apiDetail from '../../api/detail'
import recommended from './recommended'
export default {
    data(){
        return{
            tabTit:[
                {
                    title:'招标公告',
                    isAction:true
                },
                {
                    title:'资料下载',
                    isAction:false
                },
                {
                    title:'投标报名',
                    isAction:false
                },
                {
                    title:'中标公式',
                    isAction:false
                }
            ],
            divTab1:{
                height:document.body.clientHeight/(1334/70) + 'px',
                lineHeight:document.body.clientHeight/(1334/70) + 'px',
                paddingLeft:document.body.clientWidth/(750/40) + 'px',
                paddingRight:document.body.clientWidth/(750/40) + 'px',
            },
            newsId:this.$route.params.newId,
            bannerImgHeight:{
                height:(document.body.clientWidth/(750/360))+'px',
            },
            divTab:{
                paddingLeft:document.body.clientWidth/(750/40) + 'px',
                paddingRight:document.body.clientWidth/(750/40) + 'px',
            },
            h2Style:{
                paddingTop:document.body.clientWidth/(750/40) + 'px',
                paddingBottom:document.body.clientWidth/(750/40) + 'px',
            },
            detail:'',
            tabIndex:0
        }
    },
    components:{
        recommended
    },
    mounted(){
        this.channelDetail()
    },
    methods:{
        // 渠道合作详情
        channelDetail(){
            let parms = {id:this.newsId}
            apiDetail.channel(parms).then(data => {
                this.detail = data.body.data
                this.focus(data.body.data.pubUserId)
            })
        },
        // 判断是否订阅
        focus(attentionId){
            let parms = {userId:this.$route.params.userId,attentionId:attentionId}
            apiDetail.focusOn(parms).then(data => {
                this.focusStatus = data.body.data.focusStatus
            })
        },
        // 点击订阅
        addOn(attentionId){
            let parms = {userId:this.$route.params.userId,attentionId:attentionId,focusStatus:this.focusStatus}
            apiDetail.addFocus(parms).then(data => {
                this.focusStatus = data.body.data.focusStatus
            })
        },
        // tab切换
        tab(index){
            this.tabIndex = index
        }
    },
    filters:{
        timeData(val){
            let date = new Date(val)
            let Y = date.getFullYear() + '-'
            let M = (date.getMonth()+1 < 10 ? '0'+(date.getMonth()+1) : date.getMonth()+1) + '-'
            let D = date.getDate() + ' '
            return Y+M+D
        },
        money(val){
            return val/10000
        }
    }
}
</script>
